<template>
    <div class="tableRow">
        <el-row class="select-list" v-permission="'tool:gen:query'">
            <el-form :inline="true" ref="selectForm" :model="selectFormModel" :label-position="'right'"
                     label-width="80px" size="mini" @submit.native.prevent>
                <el-form-item label="表名称" prop="tableName">
                    <el-input v-model="selectFormModel.tableName" placeholder="表名称" style="width: 200px" clearable
                              @keyup.enter.native="onSearch"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" plain round @click="onSearch">搜索
                    </el-button>
                    <el-button type="warning" icon="el-icon-refresh" size="mini" plain round
                               @click="onRefreshSelectForm">重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row class="toolbar">
            <el-button type="primary" icon="el-icon-download" size="mini" plain @click="batchGenCode"
                       :disabled="dialog.isBatchGenCodeDisabled"
                       v-permission="'tool:gen:code'">
                生成代码
            </el-button>
        </el-row>
        <data-table ref="dataTable"
                    :options="options"
                    :operates="operates"
                    :api="getGenList"
                    :columns="columns"
                    :query="selectFormModel"
                    @handleSelectionChange="handleSelectionChange"
        />
    </div>
</template>
<script lang="ts">
    import {Component, Ref, Vue} from "vue-property-decorator";
    import DataTable from "@/components/DataTable/DataTable.vue";
    import {batchGenCode, genCode, getGenList} from '@/api/gen';
    import {mimeMap, resolveBlob} from "@/utils";

    @Component({
        components: {
            DataTable
        }
    })
    export default class Role extends Vue {
        private getGenList: Function = getGenList;
        @Ref("dataTable") private dataTable: any;
        @Ref("selectForm") private selectForm: any;

        /*搜索框*/
        selectFormModel: any = {
            tableName: ""
        };
        /*列信息*/
        columns: any = [
            {label: "表名", prop: "tableName"},
            {label: "描述", prop: "tableComment"},
            {label: "创建时间", prop: "createTime", width: 160},
            {label: "更新时间", prop: "updateTime", width: 160},
        ];

        // table 的参数
        options: any = {
            stripe: true, // 是否为斑马纹 table
            loading: true, // 是否添加表格loading加载动画
            highlightCurrentRow: true, // 是否支持当前行高亮显示
            multipleSelect: true, // 是否支持列表项选中功能
        };
        /*操作栏*/
        operates: any = {
            width: "130px",
            fixed: "right",
            list: [
                {
                    label: "生成代码",
                    type: "primary",
                    icon: "el-icon-download",
                    plain: true,
                    disabled: (index, row) => {
                        return false;
                    },
                    permission: "tool:gen:code",
                    method: (index, row) => {
                        this.genCode(index, row);
                    }
                }
            ]
        };

        dialog: any = {
            isBatchGenCodeDisabled: true,
            formData:[]
        };


        /*选中事件*/
        handleSelectionChange(val): void {
            if (val) {
                this.dialog.isBatchGenCodeDisabled = val.length <= 0;
            }
            this.dialog.formData = val;
        }

        /*生成代码*/
        batchGenCode(index: number, row: any): void {
            this.$confirm("确定要生成选中表的代码吗？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                const tableNames: Array<any> = [];
                this.dialog.formData.forEach((item, index) => {
                    tableNames[index] = item.tableName;
                });
                return batchGenCode({"tableNames":tableNames});
            }).then((response: any) => {
                resolveBlob(response, mimeMap.zip);
            }).catch((e) => {
                console.log(e);
            });
        }

        genCode(index: number, row: any): void {
            this.$confirm("确定要生成该表的代码吗？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                return genCode({"tableName": row.tableName});
            }).then((response: any) => {
                resolveBlob(response, mimeMap.zip);
            }).catch((e) => {
                console.log(e);
            });
        }

        /*搜索*/
        onSearch(): void {
            this.dataTable.refresh();
        }

        /*重置*/
        onRefreshSelectForm(): void {
            //恢复搜索默认信息
            this.selectForm.resetFields();
            this.onSearch();
        }
    }
</script>

<style scoped lang="scss">

</style>

